<template>
  <div class="doctor-list">
    <van-nav-bar
      title="选择医生"
      left-arrow
      @click-left="router.back()"
      fixed
    />

    <!-- 搜索栏 -->
    <div class="search-bar">
      <van-search
        v-model="searchText"
        placeholder="搜索医生姓名/科室"
        @search="onSearch"
      />
    </div>

    <!-- 医生列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="doctor-cards">
          <van-cell-group
            v-for="doctor in doctors"
            :key="doctor.id"
            inset
            class="doctor-card"
            @click="goToDetail(doctor.id)"
          >
            <van-cell center>
              <template #icon>
                <van-image
                  round
                  width="50"
                  height="50"
                  :src="doctor.avatar || defaultAvatar"
                  style="margin-right: 12px"
                />
              </template>
              <template #title>
                <div class="doctor-info">
                  <span class="name">{{ doctor.realName }}</span>
                  <van-tag
                    :type="doctor.online ? 'success' : 'warning'"
                    size="small"
                  >
                    {{ doctor.online ? '在线' : '离线' }}
                  </van-tag>
                </div>
                <div class="subtitle">
                  {{ doctor.specialty || '暂无信息' }}
                </div>
              </template>
              <template #label>
                <div class="stats">
                  <span>接诊：{{ doctor.consultationCount || 0 }}人</span>
                  <span class="divider">|</span>

                </div>
              </template>
              <template #right-icon>
                <van-icon name="arrow" />
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getDoctorList } from '@/api/doctor'
import defaultAvatar from '@/assets/default-avatar.png'

const router = useRouter()
const searchText = ref('')
const doctors = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const current = ref(1)
const size = ref(10)

// 加载医生列表
const loadDoctors = async () => {
  try {
    const res = await getDoctorList({
      current: current.value,
      size: size.value,
      name: searchText.value
    })

    if (res.code === 200) {
      if (refreshing.value) {
        doctors.value = []
        refreshing.value = false
      }

      const newDoctors = res.data.records || []
      doctors.value.push(...newDoctors)

      // 判断是否加载完成
      if (doctors.value.length >= res.data.total) {
        finished.value = true
      }
      current.value++
    } else {
      showToast(res.message || '获取医生列表失败')
    }
  } catch (error) {
    console.error('获取医生列表失败:', error)
    showToast('获取医生列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const onSearch = () => {
  current.value = 1
  finished.value = false
  doctors.value = []
  loadDoctors()
}

// 下拉刷新
const onRefresh = () => {
  finished.value = false
  current.value = 1
  loadDoctors()
}

// 上拉加载
const onLoad = () => {
  if (!loading.value) {
    loading.value = true
    loadDoctors()
  }
}

// 跳转到医生详情
const goToDetail = (id) => {
  router.push(`/consultation/detail/${id}`)
}

onMounted(() => {
  loadDoctors()
})
</script>

<style lang="scss" scoped>
.doctor-list {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;

  .search-bar {
    position: sticky;
    top: 46px;
    z-index: 2;
  }

  .doctor-cards {
    padding: 12px 0;

    .doctor-card {
      margin-bottom: 12px;

      .doctor-info {
        display: flex;
        align-items: center;
        gap: 8px;

        .name {
          font-size: 16px;
          font-weight: 500;
        }
      }

      .subtitle {
        font-size: 14px;
        color: #666;
        margin-top: 4px;
      }

      .stats {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999;
        margin-top: 8px;

        .divider {
          margin: 0 8px;
          color: #eee;
        }
      }
    }
  }
}
</style>
